<template>
  <div class="home">
    <TodoForm />
    <TodoFilter />
    <ul class="todo-list">
      <TodoItem 
        v-for="todo in filteredTodos" 
        :key="todo.id" 
        :todo="todo" 
        @toggle="toggleTodo" 
        @delete="deleteTodo" 
      />
    </ul>
    <button v-if="stats.completed > 0" @click="clearCompleted" class="clear-btn">
      Clear completed
    </button>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useTodoStore } from '../stores/todo'
import TodoItem from '../components/TodoItem.vue'
import TodoForm from '../components/TodoForm.vue'
import TodoFilter from '../components/TodoFilter.vue'

const store = useTodoStore()
const { filteredTodos, stats } = storeToRefs(store)
const { toggleTodo, deleteTodo, clearCompleted } = store
</script>

<style scoped>
.todo-list {
  list-style: none;
  padding: 0;
  max-width: 400px;
  margin: 20px auto;
}

.clear-btn {
  margin-top: 20px;
  padding: 5px 10px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.clear-btn:hover {
  background-color: #ff5252;
}
</style>